<template>
    <div class="app-container">
        <!-- 医院信息 -->
        <h5 class="titleInfo">医院信息</h5>
        <!-- 医院付款详情 -->
        <el-form class="form" ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="医院名称">
                        <span class="spanToInput">{{hospitalInfoList.hospitalName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="审核状态">
                        <span class="spanToInput">{{hospitalInfoList.paidStatus | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款单号">
                        <span class="spanToInput">{{hospitalInfoList.paymentSn | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="回款比率">
                        <span class="spanToInput">{{hospitalInfoList.paidRatio | filterNull}}</span>
                    </el-form-item>
                </el-col>-->
                <el-col :span="12">
                    <el-form-item label="回款总金额">
                        <span class="spanToInput">{{hospitalInfoList.amount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="应付款金额">
                        <span class="spanToInput">{{hospitalInfoList.paidAmount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款卡号">
                        <span class="spanToInput">{{hospitalInfoList.paidCard | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="户名">
                        <span class="spanToInput">{{hospitalInfoList.paidAccount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="付款凭证">
                        <div v-if="imgUrl.length>0">
                            <img
                                v-for="(item,index) in imgUrl"
                                :key="index"
                                class="elFormImg"
                                :src="item | imgFilter"
                                alt
                                @click="imgDialogFn(item)"
                            />
                        </div>
                        <span v-else class="spanToInput">暂无</span>
                    </el-form-item>
                    <!-- 图片弹出窗 -->
                    <el-dialog :visible.sync="dialogVisible" width="30%">
                        <img style="width:100%" :src="imgDialog" alt />
                    </el-dialog>
                </el-col>
            </el-row>
        </el-form>
        <div class="divBar" />
        <h5 class="titleInfo">回款单信息</h5>
        <!-- 回款单主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                show-summary
                :summary-method="getSummaries"
            >
                <el-table-column fixed label="序号" type="index" width="50"></el-table-column>
                <el-table-column prop="orderSn" label="流水单号"></el-table-column>
                <el-table-column prop="repaymentSn" label="回款单号"></el-table-column>
                <el-table-column prop="userName" label="客户姓名"></el-table-column>
                <el-table-column prop="userPhone" label="客户手机号"></el-table-column>
                <el-table-column prop="consultantName" label="咨询师姓名"></el-table-column>
                <el-table-column prop="receivableAmount" label="应回款金额"></el-table-column>
                <el-table-column prop="receivedAmount" label="已回款金额"></el-table-column>
                <el-table-column prop="reviewAmount" label="审批中回款金额"></el-table-column>
                <el-table-column prop="surplusReceivableAmount" label="剩余回款金额"></el-table-column>
                <el-table-column prop="currentAmount" label="本次回款金额"></el-table-column>
                <el-table-column label="回款比率">
                    <template slot-scope="scope">
                        <div>{{scope.row.paidRatio}}%</div>
                    </template>
                </el-table-column>
                <el-table-column prop="paidAmount" label="应付款金额"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import hospitalPay from "@/api/hospitalPay";
export default {
    name: "hospitalPayInfo",
    data() {
        return {
            // table列表
            tableData: [],
            tableLoading: true,
            form: {},
            hospitalInfoList: {},
            imgUrl: [],
            dialogVisible: false,
            imgDialog: null
            // totalsArr: []
        };
    },
    filters: {
        imgFilter(e) {
            return sessionStorage.getItem("imgUrlPrefix") + e;
        },
        filterNull(e) {
            if (e) {
                return e;
            } else {
                return "暂无";
            }
        }
    },
    mounted() {
        let id = JSON.parse(this.$route.query.userId);
        this.getDetails({ id: String(id) });
    },
    methods: {
        // 图片弹出窗
        imgDialogFn(e) {
            this.dialogVisible = true;
            this.imgDialog = sessionStorage.getItem("imgUrlPrefix") + e;
        },
        // 获取详情列表
        getDetails(e) {
            hospitalPay
                .getDetails(e)
                .then(res => {
                    if (!res.data.code) {
                        // console.log(res);
                        let resData = res.data.data;
                        this.hospitalInfoList = resData;
                        this.tableData = resData.responseDTOS;
                        this.imgUrl = resData.images;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        // table表数据合计
        getSummaries(param) {
            // console.log(param);
            //param 是固定的对象，里面包含 columns与 data参数的对象 {columns: Array[4], data: Array[5]},包含了表格的所有的列与数据信息
            const { columns, data } = param;
            // console.log("cc",columns)
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                let values;
                // console.log(column.property)
                if (
                    column.property == "currentAmount" ||
                    column.property == "paidAmount"
                ) {
                    values = data.map(item => Number(item[column.property]));
                } else {
                    values = data.map(item => String(item[column.property]));
                }
                // console.log(values)
                //验证每个value值是否是数字，如果是执行if
                if (
                    !values.every(value => isNaN(value)) &&
                    values.every(value => typeof value == "number")
                ) {
                    sums[index] = values.reduce((prev, curr) => {
                        return prev+curr
                    }, 0);
                    // sums[index] += "";
                } else {
                    sums[index] = "";
                }
            });
            this.navNums = sums.filter(e => {
                return e !== "" && e !== "合计";
            });
            return sums;
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
.app-container {
    padding: 0.1px !important;
}
.form {
    margin-left: 20px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.elFormImg {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    cursor: pointer;
}
.listDiv {
    padding-bottom: 20px;
    margin: 0 20px;
    box-sizing: border-box;
}
</style>